<template>
  <div class="main">
    <Tap title="实时动态" tip="返回实时动态" @tap="tap" color="#4169e2"></Tap>
    <TimeLine :showMore="false" :dataList="timeLineData"></TimeLine>
    <span class="loadmore" v-if="!isLoadMore">{{isMore?"正在加载...":"暂无更多数据"}}</span>
    <span class="loadmore" v-if="isLoadMore">正在加载...</span>
    <img class="top" src="../assets/image/top.png" @click="toTop"/>
    <div class="bottom" :style="{background:'url('+config.bottom_img+') no-repeat',backgroundSize: 'cover'}"></div>
  </div>
</template>

<script>
  import TimeLine from '@/components/Common/TimeLine'
  import Tap from '@/components/Common/Tap'

  export default {
    name: "TimeLineComponet",
    components: {
      TimeLine,
      Tap,
    },
    data() {
      return {
        config:window.config,
        timeLineData: [],
        page: 0,
        isLoadMore: false,
        isMore: true
      }
    },
    mounted() {
      this.getData();
      // 添加滚动事件，检测滚动到页面底部
      window.addEventListener('scroll', this.scrollBottom)
    },
    methods: {
      getData() {
        this.page++;
        this.$get("/getTimeLine",{page:this.page}).then((res)=>{
          if(res.code==1){
            alert("暂无数据");
            return;
          }
          this.timeLineData=res.data;
          if(res.data.length<20){
            this.isMore=false;
          }
        });


      },
      scrollBottom() {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        if (scrollTop + windowHeight == scrollHeight && this.timeLineData.length !== 0) {
          this.loadMore();
        }
      },
      toTop() { //回到顶部动画
        document.documentElement.scrollTop -= 80;
        if (document.documentElement.scrollTop > 0) {
          var c = setTimeout(() => this.toTop(80), 16);
        } else {
          clearTimeout(c);
        }
      },
      loadMore() {
        console.log("loadMore")
        if (!this.isMore) {
          return;
        }
        this.page++;
        this.isLoadMore = true;
        this.$get("/getTimeLine",{page:this.page}).then((res)=>{
          this.isLoadMore=false;
          if(res.code==1){
            alert("暂无数据");
            return;
          }
          res.data.forEach(item=>{
            this.timeLineData.push(item);
          })

          if(res.data.length<20){
            this.isMore=false;
          }
        });

      },
      tap(title) {
        this.$router.push({path:'/yiqing'});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tap {
    margin-top: 0 !important;

  }

  .loadmore {
    display: block;
    text-align: center;
    padding: .16rem;
    font-size: .14rem;
  }

  .top {
    position: fixed;
    right: .16rem;
    bottom: .16rem;
    width: .5rem;
  }

</style>
